<script setup>
import aiEditor from '@/components/aiEditor/index.vue';
import { ref, onMounted } from 'vue'
import { blogAdd } from '@/api/bloglist';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
const formInline = ref({
  title: '',
  context: '',
  label: [],
})

const labels = ref(['javascript', 'vue', 'react', 'css', 'html', 'nodejs', 'typescript'])
const btnloading = ref(false)
// 提交
const submit = async () => {

  console.log(formInline.value)
  // btnloading.value = true
  const res = await blogAdd(
    formInline.value.context,
    formInline.value.label,
    formInline.value.title,
  )
  console.log(res)
  setTimeout(() => {
    router.push('/home')
  }, 2000)

  if (res.code === 200) {
    ElNotification({
      title: 'Success',
      message: res.msg,
      type: 'success',
    })
  }

  if (res.code === 401) {
    ElNotification({
      title: 'Error',
      message: res.smg,
      type: 'Error',
    })
  }

}







</script>

<template>
  <div class="back">
    <div class="moon-edit">
      <div class="moon-h1">
        <div class="fan" @click="$router.go(-1)"><i class="iconfont icon-fanhui"></i>返回</div>
        <h1>添加您的文章</h1>
      </div>
      <el-form v-loading="btnloading" :inline="true" :model="formInline" label-width="auto"
        style="width: 100%; padding: 20px;">
        <!-- 每一项 -->
        <el-form-item label="添加标题:" style="width: 100%;">
          <el-input v-model="formInline.title" />
        </el-form-item>
        <!-- 每一项 -->
        <el-form-item style="width: 100%;min-height: 400px;height: 500px;">
          <aiEditor v-model="formInline.context"></aiEditor>
        </el-form-item>
        <!-- 每一项 -->
        <el-form-item label="文章类型标签" style="display: block;display: flex;">
          <el-select v-model="formInline.label" placeholder="选择文章类型">
            <el-option v-for="(item, index) in labels" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item style="display: block;">
          <el-button :loading="btnloading" style="margin-left: auto;">返回</el-button>
          <el-button :loading="btnloading" type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>



<style lang="less" scoped>
.back {
  width: 99%;
  height: 100%;
  // background: url('../../assets/img/banner.jpg') no-repeat top center;
  // background: url('../../assets/img/feng2.jpg') no-repeat top center;
  color: #000;

  .moon-edit {
    width: 100%;
    // height: 400px;
    margin: 20px auto;
    border: 0px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5.5px);

    .moon-h1 {
      position: relative;
      width: 100%;
      height: 20px;
      line-height: 20px;
      padding: 20px 0px;

      .fan {
        position: absolute;
        padding: 0px 10px;
        font-size: 18px;

        i {
          font-size: 18px;
        }
      }

      h1 {
        width: 100%;
        font-size: 26px;
        text-align: center;
      }
    }
  }
}
</style>